<template>
  <el-tooltip
    effect="dark"
    :content="props.content"
    placement="top-start">
    <el-button
      :icon="props.isElIcon ? props.icon : undefined"
      text
      :disabled="props.disabled"
      :style="buttonStyle"
      :loading="props.loading"
      @click.stop="handleClick">
      <template v-if="!props.isElIcon">
        <svg-icon v-if="!props.loading" :icon="props.icon"/>
      </template>
    </el-button>
  </el-tooltip>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon'
import { defineProps, defineEmits, computed } from 'vue'

const props = defineProps({
  content: String,
  icon: String, // icon名
  isElIcon: { // 是否是element plus的icon
    type: Boolean,
    default: false
  },
  loading: Boolean,
  disabled: Boolean,
  color: { // 是否是element plus的icon
    type: String,
    default: '#409eff'
  } // 按钮颜色
})

const buttonStyle = computed(() => {
  return props.disabled ? { color: '#8d8e90', cursor: 'no-drop' } : { color: props.color }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}
</script>

<style scoped lang="scss">
</style>
